<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="zxh">
    <title>弹窗</title>
    <style>
        body {
            background-color: lightblue;
            height: 100%;
        }
        
        a {
            text-decoration: none;
            color: #eee;
            display: block;
        }
        
        .callout_button {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
            height: 40px;
            margin-top: 50px;
            background-color: #fff;
        }
        
        .callout_button input {
            background-color: gray;
            padding: 10px;
        }
        
        .close_button {
            background: #363636;
            margin: 0 auto;
        }
        
        .close_button:hover {
            background: black;
        }
        
        .mask {
            width: 100%;
            height: 100%;
            background-color: lightgray;
            position: absolute;
            bottom: 0px;
            left: 0px;
            opacity: 0.5;
            z-index: 8000;
            display: none;
        }
        
        .dialog {
            width: 400px;
            background: #fff;
            position: absolute;
            z-index: 9000;
            padding-bottom: 10px;
            display: none;
            -moz-user-select: none;
            -webkit-user-select: none;
        }
        
        .dialog_head {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #333;
            background-color: #eee;
            cursor: move;
            position: relative;
        }
        
        #s2 {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 10px;
            position: absolute;
            right: 15px;
            cursor: pointer;
        }
        
        .dialog_content {
            width: 100%;
            height: 200px;
            margin-top: 30px;
            line-height: 50px;
            text-align: center;
        }
        
        form input {
            width: 200px;
            height: 30px;
            padding-left: 5px;
            border: 1px solid #ccc;
        }
        
        form button {
            width: 220px;
            padding: 5px;
            background-color: #ccc;
            border: none;
        }
    </style>
</head>

<body>
    <div id="callout" class="button callout_button"><input type="button" value="点击我"></div>
    <div id="mask" class="mask"></div>
    <form class="dialog" id="dialog">
        <div class="dialog_head" id="move_part">
            <span id="s1">用户登录</span>
            <span id="s2">X</span>
        </div>
        <div class="dialog_content">
            <div id="username"><label for="">账号：</label><input type="text" placeholder="请输入用户名"></label>
            </div>
            <div id="password"><label for="">密码：</label><input type="text" placeholder="请输入密码"></label>
            </div>
            <button type="button">登录</button>
        </div>
        </div>
    </form>
</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $(document).ready(function () {
        var $dialog = $("#dialog")
        var $mask = $("#mask")

        //自动居中对话框
        function autoCenter(el) {
            var bodyW = $(window).width()
            var bodyH = $(window).height()
            var elW = el.width()
            var elH = el.height()
            $dialog.css({ "left": (bodyW - elW) / 2 + 'px', "top": (bodyH - elH) / 2 + 'px' })
        };

        //点击弹出对话框
        $("#callout").click(function () {
            $dialog.css("display", "block")
            $mask.css("display", "block")
            autoCenter($dialog)
        })

        //禁止选中对话框内容
        if (document.attachEvent) {
            //ie的事件监听，拖拽div时禁止选中内容，
            // firefox与chrome已在css中设置过-moz-user-select: none; 
            // -webkit-user-select: none;
            g('dialog').attachEvent('onselectstart', function () {
                return false;
            })
        }
        //声明需要用到的变量
        var mx = 0, my = 0     //鼠标x、y轴坐标（相对于left，top）
        var dx = 0, dy = 0   //对话框坐标（同上）
        var isDraging = false     //不可拖动

        //鼠标按下
        $("#move_part").mousedown(function (e) {
            e = e || window.event
            //点击时鼠标X坐标
            mx = e.pageX
            //点击时鼠标Y坐标
            my = e.pageY
            dx = $dialog.offset().left
            dy = $dialog.offset().top
            //标记对话框可拖动     
            isDraging = true
        });

        //鼠标移动更新窗口位置
        $(document).mousemove(function (e) {
            var e = e || window.event
            //移动时鼠标X坐标
            var x = e.pageX
            //移动时鼠标Y坐标
            var y = e.pageY
            //判断对话框能否拖动
            if (isDraging) {
                //移动后对话框新的left值
                var moveX = dx + x - mx
                //移动后对话框新的top值
                var moveY = dy + y - my
                //设置拖动范围
                var pageW = $(window).width()
                var pageH = $(window).height()
                var dialogW = $dialog.width()
                var dialogH = $dialog.height()
                //X轴可拖动最大值
                var maxX = pageW - dialogW
                //Y轴可拖动最大值
                var maxY = pageH - dialogH
                //X轴可拖动范围
                moveX = Math.min(Math.max(0, moveX), maxX)
                //Y轴可拖动范围
                moveY = Math.min(Math.max(0, moveY), maxY)
                //重新设置对话框的left、top
                $dialog.css({ "left": moveX + 'px', "top": moveY + 'px' })
            };
        });

        //鼠标离开
        $("#move_part").mouseup(function () {
            isDraging = false
        });

        //点击关闭对话框
        $("#s2").click(function () {
            $dialog.css("display", "none")
            $mask.css("display", "none")
            // $('#s2').css('cursor', 'pointer')
        })

        //窗口大小改变时，对话框始终居中
        window.onresize = function () {
            autoCenter($dialog)
        }
    })

</script>